<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>阿洛识字</title>
    <meta name="keywords" content="关中刀客在青岛,个人博客,前端技术博客">
    <meta name="description" content="一款宝宝识字的web应用">
    <link rel="stylesheet" href="static/assets/css/bootstrap-4.3.1.min.css">
    <style>
        body {
            background-color: skyblue;
        }

        body > .container > section {
            margin-bottom: 2em;
        }

        .jumbotron {
            background-color: pink;
            margin-bottom: 1rem;
            padding: 1rem;
            overflow: hidden;
        }

        .jumbotron h2 {
            font-size: 1.75rem;
            color: #fff;
        }

        .box-wrap{
            box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,.33);

        }
        .box-wrap > div {
            position: relative;
            width: calc(100%/3);
            height: 6rem;
            line-height: 5rem;
            font-size: 4rem;
            font-weight: bold;
            border: .125rem solid gray;
            background: lightgray;
            box-shadow: -0.25rem -0.25rem 0.25rem rgba(0,0,0,.88) inset;
            cursor: pointer;
        }
        .box-wrap.w2h2 > div{
            width: calc(100%/2);
        }
        .box-wrap.w2h2 > div:nth-of-type(4) ~ div{
            display: none;
        }
        .box-wrap > div.correct {
            box-shadow: 0.25rem 0.25rem 0.25rem rgba(0,0,0,.9) inset;
            color: #fff;
            background: limegreen;
        }

        .box-wrap > div.error {
            background: indianred;
        }

        .box-wrap ~ img {
            display: none;
            top: 57%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #answer {
            font-size: 1.25rem;
            font-weight: bold;
            color: rgba(0, 0, 0, .2);
            background: rgba(0, 0, 0, .05);
        }

        #next {
            width: 100%;
        }
    </style>
</head>

<body id="investmentRisk">
<div id="container">
    <div class="container">
        <div class="jumbotron">
            <h2 class="text-center">阿洛加油<br>
                <small>ヾ(◍°∇°◍)ﾉﾞ</small>
            </h2>
            <div class="input-group justify-content-end">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                           value="number">
                    <label class="form-check-label" for="inlineRadio1">数字</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                           value="letter">
                    <label class="form-check-label" for="inlineRadio2">大写字母</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5"
                           value="lowerCaseLetter" checked>
                    <label class="form-check-label" for="inlineRadio5">小写字母</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4"
                           value="letterOrNum">
                    <label class="form-check-label" for="inlineRadio4">字母或数字</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6"
                           value="operateChar">
                    <label class="form-check-label" for="inlineRadio6">符号</label>
                </div>
            </div>
            <hr>
            <div class="input-group justify-content-end">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="model" id="model1"
                           value="w2h2" checked>
                    <label class="form-check-label" for="model1">2x2</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="model" id="model2"
                           value="w3h2">
                    <label class="form-check-label" for="model2">3x2</label>
                </div>
                <div class="ml-3">
                    <output id="answer"></output>
                </div>
            </div>
        </div>
        <section class="text-center mb-2 position-relative">
            <p class="mb-2">请点击答案方格：</p>
            <div class="box-wrap d-flex flex-wrap w2h2">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <img src="" id="good" class="position-absolute w-50" alt="thumb">
        </section>
        <p>第
            <output id="counter" class="font-weight-bold"></output>
            道题
        </p>
        <p id="tip"></p>
        <!--
                <p class="text-center">
                    <button class="btn btn-primary" id="next">下一题</button>
                </p>
        -->
        <audio id="pippaPig" src="static/music/PeppaPig.m4a" controls style="display: none"></audio>
    </div>
</div>
<audio id="sound_correct" hidden src="static/sound/tada.wav"></audio>
<audio id="sound_next" hidden src="static/sound/next.wav"></audio>
<script src="static/assets/js/jquery-3.3.1.min.js"></script>
<script src="static/js/index.js"></script>
</body>
</html>



